.nativaDataBoxShadow {
	display: none;
	background:rgba(darken($bgColorAlt,30), 0.8);
	border: $border;
	@include boxShadow;
	border: none;
	position: fixed;
	left: 700px;
	top: 0;
	bottom:0;
	right: 0;
	z-index: 300;
}

.nativaDataBox {
		background: rgba($bgColorAlt, 0.9);
		border: $border;
		@include boxShadow;
		overflow: hidden;
		overflow-y: auto;
		z-index: 300;
	}

.nativaDataBoxName {
	background-color: $bgColorAltDarken;
	height: $headerHeight;
	position: relative;
	border-bottom: 1px solid darken($borderColor, 10);
	padding: 0 20px;

	i {
		padding-left: 10px;
		float: right;
		line-height: $headerHeight;
		color: darken($bgColorAlt, 50);
		cursor: pointer;

		&:hover {
			color: darken($bgColorAlt, 70);
		}
	}

	h3 {
		line-height: $headerHeight;
		color: darken($bgColorAlt, 50);
		font-size: 16px;
		margin-bottom: 0px;
		text-align: left;
		float: left;
		
		}
}
.nativaDataHead {
	width: 100%;
	display: block;
	background-color: #fff;
	border: $border;
	padding-bottom: 20px;
	overflow: hidden;
	text-align: left;
	@include border-radius(4px);
	@include border-box;
	@include boxShadow;

	img {
		width: 100%;
		height: auto;
	}

	h3 {
		font-size: $baseFontSize*1.5;
		margin: 15px 0;
		color: $mainColor;
		font-weight: bold;
		padding: 0 20px;
	}
	p {
		color: $bodyColor;
		padding: 0 20px;
		font-style: italic;
		font-size: 1.5em;
		font-weight: 300;
	}
	

}

.nativaDataItem {
	
	background: #fff;
	padding: 20px;
	border: $border;
	margin: 10px 0;
	overflow: hidden;
	@include boxShadow;
	@include border-box;
	@include border-radius(4px);
	
	&:hover {
		border-color: $mainColor;	
	}

	h3 {
		font-weight: bold;
		font-size: 1.5em;
		margin: 8px 0;
		float: left;

		i {
			margin-right: 10px;
			color: darken($bgColorAltDarken,20);
		}
	}
	
	p {
		font-size: 14px;
	}
	
	img {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		border: none;

	}

	.nativeFlower {
		margin-top: 10px;
		float: left;
		@include border-radius(2px);
	}

	&.hasImage {
		padding: 0;
	}

	.viverosLink {
		float: right;
		font-size: 13px;
		color: $mainColor;
		padding: 9px 0;
		border-bottom: 1px solid transparent;
		text-decoration: none;


		&:hover {
			border-bottom: 1px solid $mainColor;
		}
	}
}
	


.rangeDots {
	text-align: right;
	float: right;

	
	i {
		margin-right: 2px;
	}
	
	label {
		font-size: 13px;
		display: block;
		margin-bottom: 5px;
	}
}

.rangeBajo {
	color: $rangeBajo;
}
.rangeMedio {
	color: $rangeMedio;
}
.rangeAlto {
	color: $rangeAlto;
}

.nativeDataCardItem {
	width: 100%;
	float: left;
	margin-top: 20px;
}



@include min-screen($medium) {
	.nativaDataBoxShadow {
		display: block;
	}
	.nativaDataBox {
		border: none;
		border-right: $border;
		position: fixed;
		width: 400px;
		left: 300px;
		top: 0;
		bottom:0;
	}
}